<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%   
String path = request.getContextPath();   
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";   
%> 
<!DOCTYPE html>
<html>
<head>
    <title>我关注的</title>
    <base href="<%=basePath%>"> 
    <link rel="shortcut icon" href="<%=basePath%>img/favo.ico">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/todc-bootstrap.css" rel="stylesheet">
    <link href="css/global.css" rel="stylesheet">
    <link href="css/layout.css" rel="stylesheet">
    <link href="css/user.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    
    <script type="text/javascript" src="<%=basePath%>js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>js/bootstrap.js"></script>
    <script type="text/javascript" src="<%=basePath%>js/common.js"></script>
</head>
<style>

</style>

<body>
<jsp:include page="include/topbar.jsp"></jsp:include>
<jsp:include page="include/logobar.jsp"></jsp:include>
<div class="layout grid-s5m0">
	<div class="col-sub user-nav">
		<jsp:include page="include/usernav.jsp"></jsp:include>
	</div>
	<div class="main-wrap">
		<div class="box user-bd">
			<div class="tl u">
				<h3>
					我关注的
				</h3>
			</div>
			<div class="bd">
				<div class="tagsinput">
					<span id="taglist">
						<c:forEach var="tag" items="${tags }">
							<span class="badge tag action">&nbsp;${tag.name }&nbsp;<i class="icon-minus-sign" data="${tag.id }"></i></span>
		                </c:forEach> 
	                </span>
	                <span id="tagsinput_addTag" class="tagsinput-add-container badge">
	                	<input placeholder="新标签" id="tagsinput_tag" style="color: rgb(102, 102, 102); width: 40px;">
	                	<span class="addtag" id="addUserTagBtn"><i class="icon-plus-sign"></i></span>
	                </span>
                </div>
                <div class="timeline">
                	<ol class="unstyled inline userlist">
                	<c:forEach var='map' items='${users.list }'>
	                	<li>
	                		<div class="box img-polaroid">
	                			<div class="img">
			                		<p>
			                			<a href="c/home/${map.id }.html">
							        	<img class="" src='upload/head/${map.head_img }?s=70' onerror='this.src="upload/head/default.jpg?s=70"' height=70 width=70/>
							        	</a>
							        </p>
						        </div>
						        <div class="info">
							        <p class="name">
							        	<a href="c/home/${map.id }.html">${map.name }</a>
							        </p>
							        <p class="prof">${map.profession }</p>
							        <p class="action">
							        	<span><i><img src='img/right.gif'/></i>已关注</span>&nbsp;&nbsp;
							        	<a class="btn-link" onclick="removeAttension(${sessionScope.user.id },${map.id },this)">取消</a>
							        </p>
						        </div>
					        
					        </div>
					    </li>
               		</c:forEach>
               		</ol>
                </div>
                <div class="pagination pagination-centered">
					<ul>
						<c:if test="${users.hasPreviousPage == true}">
							<li><a href="u/follow.html?page=${users.currentPage-1 }">上一页</a></li>
						</c:if>
						<c:forEach var="x" begin="${users.startPage }" end="${users.endPage }" step="1"> 
							<li <c:if test="${x==users.currentPage }">class="disabled"</c:if>><a href="u/follow.html?page=${x }">${x }</a></li>
						</c:forEach>
						<c:if test="${users.hasNextPage ==true }">
							<li><a href="u/follow.html?page=${users.currentPage+1 }">下一页</a></li>
						</c:if>
						
					</ul>
				</div>
			</div>
		</div>
	</div>
</div>
<input type="hidden" value="${user.id }" id="currentUserId"/>
<input type="hidden" value="<%=basePath%>" id="baseUrl"/>
<script type="text/javascript">
	$(document).ready(function(){
		listen();
		//$('#elm1').xheditor({skin:'nostyle'});
		
	});

	function listen(){
		$("#addUserTagBtn").click(function(){
			var tagName = $("#tagsinput_tag").val();
			var userId = $("#currentUserId").val();
			if($.trim(tagName)===''){
				return;
			}
			var data = {tagName:tagName,userId:userId};
			$("#addUserTagBtn").find("i").eq(0).html("<img src='img/loading-input.gif' />");
			$.ajax({    
		        type: "POST",  
		        url:"<%=basePath%>user/addtag.json",
		        contentType : 'application/json',
	            data:JSON.stringify(data),
	            dataType:'json',
		        success: function(response){ 
		        	if(response){
		        		if(response.ok){
		        			$("#taglist").append("&nbsp;<span class='badge tag action'>&nbsp;"+tagName+"&nbsp;<i class='icon-minus-sign' onclick='removeUserTag(\""+response.data.id+"\",this)'></i></span>");
			  				$("#tagsinput_tag").val('');
			  				$("#addUserTagBtn").find("i").eq(0).html("");
		        		}
		        	}
		        },
			 	error: function(e){    }
			});
		});
		$("#profile-input").keyup(function(e){
			if(e.keyCode===13){
				saveProfile($("#profile-input").find("i").eq(0));
			}
		});
	}
	function editorProfile(){
		$("#profile-saved").hide();
		$("#profile-editor").show();	
	}
	function changeToSaved(profile){
		$("#profile-saved").show();
		$("#profile-editor").hide();
		$("#profile-saved font").each(function(i,e){
			$(e).html(profile);
		});
	}
	function saveProfile(obj){
		var profile = $("#profile-input").val();
		var data = {"profile":profile};
		$.ajax({    
	        type: "post",  
	        url:"<%=basePath%>user/profilesave.json",
	        contentType : 'application/json',
            data:JSON.stringify(data),
            dataType:'json',
	        success: function(response){
				if(response.ok){
					changeToSaved(profile);
				}
	        },
	        error: function(e){}
		});
	}
	
	function removeAttension(myid,targetid,obj){
		var data = {myid:myid,targetid:targetid};
		$.ajax({    
	        type: "post",  
	        url:"<%=basePath%>user/remove-attension.json",
	        contentType : 'application/json',
            data:JSON.stringify(data),
            dataType:'json',
	        success: function(response){
				if(response.ok){
					var li = $(obj).parent().parent().parent().parent();
					li.slideUp();
				}else{
					alert(response.msg);
				}
	        },
	        error: function(e){}
		});
	}
	
	
</script>
</body>
</html>